<template>
  <div class="home">
    <div class="logo">
      <img src="../assets/logo.png" alt="" />
      <p>星链钱包</p>
    </div>
    <!-- <div class="switch">
      <div class="switch_div1">
        <span class="span1" @click="tel">手机注册</span>
        <span class="span2" @click="email">邮箱注册</span>
      </div>
    </div> -->
    <div class="content">
      <label for="" v-if="flag">
        <input
          type="email"
          v-model="userTel"
          maxlength="24"
          placeholder="请输入邮箱"
        />
      </label>
      <label for="" v-if="!flag">
        <input
          type="number"
          v-model="userTel"
          maxlength="11"
          placeholder="请输入手机号"
        />
      </label>
      <label for="" class="yzma">
        <input
          type="number"
          maxlength="6"
          v-model="userVerify"
          placeholder="请输入验证码"
        />
        <span @click="getUserVerify">{{ font }}</span>
      </label>
      <label for="">
        <input
          type="password"
          autocomplete="new-password"
          maxlength="18"
          minlength="6"
          v-model="userPassword"
          placeholder="请输入密码"
        />
      </label>
      <!-- <label for=""
        ><input
          type="text"
          v-model="Invitation"
          maxlength="10"
          placeholder="请输入接点码"
        />
      </label> -->
    </div>
    <div class="yqma">
      <span>邀请码：</span><span>{{ Invite }}</span>
    </div>
    <div class="Register">
      <div class="div1" @click="toRegister">注册</div>
      <div class="div2">
        <span @click="toDownload">去下载?</span>
      </div>
    </div>
    <div id="shade" v-if="shade">
      <img src="../assets/timg.gif" alt="" />
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  name: "Home",
  data() {
    return {
      userEmail: "", //邮箱
      userTel: "", //手机号
      userVerify: "", //验证码
      userPassword: "", //密码
      Invite: "", //邀请码
      Invitation: "", //请输入节点码
      smsid: "", //邀请码ID
      types: 1, //注册
      font: "获取验证码",
      request_time: "", //时间戳
      sign: "", //token
      flag: false, //切换注册类型
      shade: false, //遮罩层
      num: 1,
    };
  },
  mounted() {
    this.Invite = this.$route.query.inviteCode;
    // console.log(this.$route.query.inviteCode);
    // this.Invite = window.location.search.substring(12,18);
  },
  methods: {
    // 获取验证码
    getUserVerify() {
      if (this.userTel.length != 0) {
        var Datas = new FormData();
        Datas.append("userTel", this.userTel); //手机或邮箱
        Datas.append("type", "1"); //注册类型
        Datas.append("types", this.types); //注册类型
        this.axios.post("htmlInterface/user/getsign", Datas).then((res) => {
          if (res.data.code == 200) {
            this.sign = res.data.data.sign;
            this.request_time = res.data.data.request_time;
            var formData = new FormData();
            formData.append("userTel", this.userTel); //手机或邮箱
            formData.append("sign", this.sign); //验证码ID
            formData.append("request_time", this.request_time); //时间戳
            formData.append("type", "1"); //注册类型
            formData.append("types", this.types); //注册类型
            this.axios
              .post("appInterface/loginReg/getSmsCode", formData)
              .then((res) => {
                if (res.data.code == 200) {
                  this.smsid = res.data.data.id; //验证码ID
                  let timesec = 60;
                  this.font = timesec + "s";
                  let setInt = setInterval(() => {
                    timesec--;
                    this.font = timesec + "s";
                    if (timesec == 0) {
                      this.font = "获取验证码";
                      window.clearInterval(setInt);
                      timesec = 60;
                    }
                  }, 1000);
                } else {
                  Toast(res.data.msg);
                }
              });
          } else {
            Toast(res.data.msg);
          }
        });
      } else {
        Toast("请输入手机号");
      }
    },
    // 注册
    toRegister() {
      if (this.userTel.length != 0) {
        let formData = new FormData();
        formData.append("userTel", this.userTel); //手机号或邮箱
        formData.append("pwd", this.userPassword); //密码
        formData.append("smsid", this.smsid); //验证码ID
        formData.append("codes", this.userVerify); //验证码
        formData.append("types", this.types); //注册类型
        formData.append("inviteCode", this.Invite); //邀请码
        formData.append("jInviteCode", this.Invitation); //节点邀请码
        if (this.num == 1) {
          this.num++;
          this.axios
            .post("htmlInterface/user/getsign", formData)
            .then((res) => {
              this.sign = res.data.data.sign;
              this.request_time = res.data.data.request_time;
              formData.append("sign", this.sign); //token
              formData.append("request_time", this.request_time); //时间戳
              if (res.data.code == 200) {
                this.axios
                  .post("appInterface/loginReg/registe", formData)
                  .then((res) => {
                    if (res.data.code == 200) {
                      this.shade = true;
                      setTimeout(() => {
                        this.$router.push("/download");
                      }, 1000);
                    } else {
                      Toast(res.data.msg);
                      this.num = 1;
                    }
                  });
              } else {
                // Toast(res.data.msg);
              }
            });
        } else {
          // Toast("已发送，请不要重复点击");
        }
      } else {
        Toast("请输入手机号");
      }
    },
    //去下载
    toDownload() {
      this.$router.push("/download");
    },
    //手机号注册
    tel() {
      this.flag = false;
      this.types = 1;
      this.userTel = "";
    },
    //邮箱注册
    email() {
      this.flag = true;
      this.types = 2;
      this.userTel = "";
    },
    //提示信息
    // open1(msg) {
    //   this.$message({
    //     message: msg,
    //     type: "success",
    //     center: true,
    //     duration: 1000,
    //   });
    // },
  },
  components: {},
};
</script>
<style lang="less" scoped>
#shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10001;
  opacity: 0.4;
  background-color: #fff;
}
#shade > img {
  width: 100px;
  height: 20px;
  margin: 0 auto;
  margin-top: 60%;
  display: block;
}
.switch {
  font-size: 16px;
  margin: 15px 0;
  .switch_div1 {
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    color: #fff;
  }
  span:hover {
    color: #228fe9;
  }
}
.yqma {
  width: 72%;
  margin: 0.2rem auto;
  text-align: left;
  font-size: 0.95rem;
  color: #fff;
}
.Register {
  margin-top: 1.6rem;
  width: 73%;
  margin: 0 auto;
  padding: 0px;
  margin-top: 1.6rem;
  .div1 {
    background-color: #fff;
    height: 2rem;
    line-height: 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #d9a562;
    margin: 1.5rem 0;
    border-radius: 0.233333rem;
    letter-spacing: 2px;
  }
  .div2 {
    margin-bottom: 0.533333rem;
    span {
      font-size: 0.7rem;
      color: #fff;
      padding: 0.133333rem 0.533333rem;
    }
  }
}
.content {
  display: flex;
  flex-direction: column;
  label {
    margin: 0.733333rem 0.133333rem;
    input {
      width: 75%;
      height: 2rem;
      // border: 1px solid #bfbfbf;
      font-size: 0.7rem;
      padding-top: 0.1rem;
      // line-height: 2rem;
      line-height: normal;
      text-indent: 0.6em;
      border-radius: 0.233333rem;
      background-color: #fff;
    }
  }
}

.logo {
  img {
    width: 5.133333rem;
    height: 5.133333rem;
    margin: 2rem auto 0;
  }
  p {
    font-size: 0.8rem;
    margin-bottom: 0.533333rem;
    color: #fff;
  }
}
.yzma {
  position: relative;
  span {
    position: absolute;
    right: 3.2rem;
    top: 50%;
    font-size: 0.7rem;
    margin-top: -0.2rem;
    color: #d9a562;
  }
}
</style>
